<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/css/bulma.min.css">
    <script src="/static/js/vue.global.prod.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <title>myansibleinfo</title>
</head>
<body>
<nav class="navbar is-light" id="mynav">
  <div class="navbar-menu">
    <div class="navbar-start">
      <template v-for="myleft in mylefts">
        <a class="navbar-item" :href="myleft.href">{{ myleft.display }}</a>
      </template>
    </div>
    <div class="navbar-end">
      <template v-for="myright in myrights">
        <a class="navbar-item" :href="myright.href">{{ myright.display }}</a>
      </template>
    </div>
  </div>
</nav>
<div id="app" class="columns">
  <div class="column is-4">
       <form>
          <input type="text" class="input" v-model="updateinfo.id" readonly>
          <input type="text" class="input" v-model="updateinfo.name" placeholder="name">
          <textarea :rows="updateinfo.hosts.split('\n').length" class="textarea" v-model="updateinfo.hosts" placeholder="hosts"></textarea>
          <input type="text" class="input" v-model="updateinfo.pattern" placeholder="pattern">
          <input type="text" class="input" v-model="updateinfo.module" placeholder="module">
           <textarea :rows="updateinfo.args.split('\n').length" class="textarea" v-model="updateinfo.args" placeholder="args"></textarea>
          <input type="text" class="input" v-model="updateinfo.forks" placeholder="forks">
          <input type="text" class="input" v-model="updateinfo.key" placeholder="key">
          <div class="select">
             <select v-model="updateinfo.proxy">
                <option value="false">无</option>
                <template v-for="oneproxy in myproxys">
                  <option :value="oneproxy">{{oneproxy}}</option>
                </template>
              </select>
          </div><br />
          <button type="button" class="button" @click="realupdate(updateinfo)">update</button>
          <button type="button" class="button" @click="delete_by_id(updateinfo.id)">delete</button>
           <button type="button" class="button" @click="copy_by_id(updateinfo.id)">copy</button>
           <button :disabled="isdisabled" type="button" class="button" @click="run_by_id(updateinfo.id)">runit</button>
           <pre style="white-space: pre-wrap; word-wrap: break-word;">{{updatedisplay}}</pre>
      </form>
  </div>
        <div class="column is-8">
            <pre style="white-space: pre-wrap; word-wrap: break-word;">{{runresult}}</pre>
        </div>
</div>
<script src="/static/js/thesame.js"></script>
<script>
const app = {
  data() {
    return {
        id : '',
        isdisabled: false,
        runresult: '',
        myproxys: [],
        updatedisplay: '',
        updateinfo: {},
    }
  },
  watch : {
  },
  methods: {
     getlog_by_id(id){
        _this=this;
        var interid = setInterval(function(){
              axios({
                  method:'get',
                  url:'/myansible/Getlog?id='+id,
                  async:false
              })
              .then(response2 => {
                  _this.runresult = response2.data;
                  if(response2.data.endsWith('ENDENDEND')){
                        clearInterval(interid);
                  }
              })
        }, 3000);
    },
    run_by_id(id){
        if ( confirm("确认运行?")==false ) {
            return false;
        }
        this.isdisabled=true
        this.runresult = 'running...'
        axios({
          method:'get',
          url:'/myansible/RunById?id='+id,
          async:false
        })
        .then(response => {
            this.getlog_by_id(response.data);
        })
    },
    get_proxynames() {
        axios({
          method:'get',
          url:'/myproxy/Getnames',
          async:false
        })
        .then(response => {
            this.myproxys = response.data;
        })
    },
    copy_by_id(id){
        if ( confirm("确认拷贝?")==false ) {
            return false;
        }
        axios({
          method:'get',
          url:'/myansible/CopyById?id='+id,
          async:false
        })
        .then(response => {
            window.location.href = "/static/myansible.html"
        })
    },
    delete_by_id(id){
        if ( confirm("确认删除?")==false ) {
            return false;
        }
        axios({
          method:'get',
          url:'/myansible/DeleteById?id='+id,
          async:false
        })
        .then(response => {
            console.log(response.data);
            window.location.href = "/static/myansible.html"
        })
    },
    realupdate(updateinfo){
        this.updatedisplay = 'update ing...';
        axios({
          method:'post',
          url:'/myansible/Update',
          data: JSON.stringify(updateinfo),
          async:false
        })
        .then(response => {
            this.updatedisplay = response.data;
        })
    },
    getinfo_byid(id){
        axios({
          method:'get',
          url:'/myansible/GetById?id='+id,
          async:false
        })
        .then(response => {
            result = response.data;
            this.updateinfo = result;
        })
    }
  },
  mounted () {
    mysearch = window.location.search;
    mysearch = mysearch.replace(/^\?/,'');
    myparam = mysearch.split('=');
    this.id = myparam[1];
    this.getinfo_byid(this.id);
    this.get_proxynames();
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>